<template>
  <div class="root">
    <el-container>
      <el-header :height="bannerHeight + 'px'" style="padding: 0">
        <Header />
        <el-aside :width="screenWidth * 0.1 + 'px'" :style="maxWidth"
          ><Aside @introduction1="ds"
        /></el-aside>
      </el-header>

      <el-main style="padding: 0">
        <div class="main" v-if="destroy">
          <Banner />
          <ContentNews @news="ds" />
          <ContentNotice @notice="ds" />
          <ContentSwitch @industry="ds" @media="ds" />
          <ContentDynamics @dynamics="ds" />
          <div class="content-class">
            <ContentBannerTitle />
            <Content-banner />
          </div>
          <ContentLink />
        </div>
        <ContentBacktop />
        <router-view
          name="Moretext"
          @textdestroy="ds"
          @textdestroy1="ds"
        ></router-view>
        <router-view
          name="Introduction"
          @indestroy="ds"
          @indestroy1="ds"
        ></router-view>
        <router-view
          name="Organization"
          @organization="ds"
          @organization1="ds"
        ></router-view>
        <router-view
          name="Teaching"
          @teaching="ds"
          @teaching1="ds"
        ></router-view>
        <router-view name="Public" @public="ds" @public1="ds"></router-view>
        <router-view name="Information" @info="ds" @info1="ds"></router-view>
      </el-main>
      <el-footer :height="bannerHeight + 10 + 'px'"><Footer /></el-footer>
    </el-container>
  </div>
</template>
<script>
import Banner from "@/components/Banner/Banner";
import Aside from "@/components/Aside/Aside";
import ContentBannerTitle from "@/components/Content/ContentBannerTitle";
import ContentBanner from "@/components/Content/ContentBanner";
import ContentSwitch from "@/components/Content/ContentSwitch";
import Header from "@/components/Header/Header";
import Footer from "@/components/Footer/Footer";
import ContentNews from "@/components/Content/ContentNews";
import ContentNotice from "@/components/Content/ContentNotice";
import ContentDynamics from "@/components/Content/ContentDynamics";
import ContentLink from "@/components/Content/ContentLink";
import ContentBacktop from "@/components/Content/ContentBacktop";
export default {
  // 注册组件
  components: {
    Banner,
    Aside,
    ContentBannerTitle,
    ContentBanner,
    ContentSwitch,
    Header,
    Footer,
    ContentNews,
    ContentNotice,
    ContentDynamics,
    ContentLink,
    ContentBacktop,
  },
  data() {
    return {
      bannerHeight: 1080, // 浏览器宽度
      screenWidth: 0,
      destroy: true,
      maxWidth: { maxWidth: " 96px" },
    };
  },
  methods: {
    setSize: function () {
      // 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = (200 / 1000) * this.screenWidth;
    },
    // 接收组件传递过来的false值
    ds(destroy) {
      this.destroy = destroy;
    },
  },
  mounted() {
    // 首次加载时,需要调用一次
    this.screenWidth = window.innerWidth;
    this.setSize(); // 窗口大小发生改变时,调用一次
    window.onresize = () => {
      this.screenWidth = window.innerWidth;
      this.setSize();
    };
  },
};
</script>
<style>
body {
  background: #e5e5e5;
}
* {
  margin: 0;
  padding: 0;
}
.el-container {
  width: 100%;
  min-width: 280px;
  max-width: 750px;
  margin: 0 auto;
  font-family: arial, helvetica;
}
/* 页头 */
.el-header {
  background: #084fb0;
  max-height: 150px;
}
/* 页尾 */
.el-footer {
  background: #084fb0;
  color: #333;
  max-height: 170px;
  text-align: center;
}
/* 侧边栏 */
.el-aside {
  position: relative;
  top: -80%;
  left: 85%;
}
/* 卡片轮播图 */
.content-class {
  background: white;
  margin: 8px 0 8px 0;
  padding-bottom: 20px;
}
html {
  /*这句话一定要写到最上面，下面的样式层叠掉这句*/
  font-size: 50px;
}
@media screen and (min-width: 280px) {
  html {
    font-size: 18px;
  }
}
@media screen and (min-width: 320px) {
  html {
    font-size: 21.33333333px;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 24px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 25px; /* 375/15=25px */
  }
}
@media screen and (min-width: 384px) {
  html {
    font-size: 25.6px;
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 26.66666667px;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 27.6px;
  }
}
@media screen and (min-width: 424px) {
  html {
    font-size: 28.26666667px;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 32px;
  }
}
@media screen and (min-width: 540px) {
  html {
    font-size: 36px;
  }
}
@media screen and (min-width: 720px) {
  html {
    font-size: 48px;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 50px; /* 750/15=50px */
  }
}
</style>
